<template>
  <div>
    <el-table
      ref="multipleTable"
      border
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      :height="height"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column prop="id" label="序号" width="50" />
      <el-table-column label="章节名称" width="450">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <div class="name-desc">
              <p class="d-flex">
                <el-input
                  v-model="scope.row.chapter_title"
                  :disabled="true"
                  class="input_a"
                  @blur="handleBlur(scope, 'input_a')"
                />
                <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_a')" />
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="章节价格" width="250">
        <template slot-scope="scope">
          <div>
            <p class="d-flex">
              <span class="no-wrap">原价：￥</span>
              <el-input
                v-model="scope.row.chapter_price"
                class="input_b"
                :disabled="true"
                @blur="handleBlur(scope, 'input_b')"
              />
              <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_b')" />
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sale_num" label="销量" width="250" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="d-flex">
            <el-button type="primary" style="background: #7C7C7C;border-color: #7C7C7C" @click="setMainClick(scope.row)">{{ scope.row.is_main ? '取消主推' : '设为主推' }}</el-button>
            <el-button type="primary" style="background: #86C1FF;border-color: #86C1FF" @click="setPreferClick(scope.row)">{{ scope.row.is_good ? '取消优选' : '设为优选' }}</el-button>
            <el-button type="primary" style="background: #00ADB3;border-color: #00ADB3" @click="editChapterItem(scope.row)">编辑</el-button>
            <el-button type="primary" style="background: #DDDDDD;border-color: #DDDDDD; color: #000" @click="deleteItem(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { upDateChapterStatus, setChapterNameOrPrice, deleteChapterItem } from '@/api/request/chapter'
const ERR_OK = 200
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      multipleSelection: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calcuHeight()
    })
  },
  methods: {
    editChapterItem(item) {
      this.$router.push({ path: '/chapterList/add-edit', query: { chapter_id: item.id }})
    },
    setMainClick(item) {
      switch (item.is_main) {
        case 0:
          item.is_main = 1
          this._upDateChapterStatus({ type: 1, id: item.id, is_main: item.is_main })
          break
        case 1:
          item.is_main = 0
          this._upDateChapterStatus({ type: 1, id: item.id, is_main: item.is_main })
          break
      }
    },
    setPreferClick(item) {
      switch (item.is_good) {
        case 0:
          item.is_good = 1
          this._upDateChapterStatus({ type: 2, id: item.id, is_good: item.is_good })
          break
        case 1:
          item.is_good = 0
          this._upDateChapterStatus({ type: 2, id: item.id, is_good: item.is_good })
          break
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteItem(id) {
      this._deleteChapterItem(id)
        .then(() => {
          this.$emit('delSuccess')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleBlur(scope, name) {
      const index = scope.$index
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = 'transparent'
      el.setAttribute('disabled', 'disabled')
      switch (name) {
        case 'input_a':
          this._setChapterNameOrPrice({ id: scope.row.id, chapter_title: scope.row.chapter_title })
          break
        case 'input_b':
          this._setChapterNameOrPrice({ id: scope.row.id, chapter_price: scope.row.chapter_price })
          break
      }
    },
    iconClick(index, name) {
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = '#eee'
      el.removeAttribute('disabled')
      el.focus()
    },
    calcuHeight() {
      this.height = document.body.clientHeight - 410
      window.onresize = () => {
        this.height = document.body.clientHeight - 410
      }
    },
    _upDateChapterStatus({ type, id, is_main, is_good }) {
      upDateChapterStatus({ type, id, is_main, is_good })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setChapterNameOrPrice({ id, chapter_title, chapter_price }) {
      setChapterNameOrPrice({ id, chapter_title, chapter_price })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _deleteChapterItem(id) {
      return deleteChapterItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";

.name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  .name-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    p {
      white-space: nowrap;
      margin: 0;
    }
  }
}
.name-wrapper .name-desc p {
  display: inline-block;
}
.el-input {
  display: inline-block;
}
.el-input /deep/ .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #666666;
  border: none;
  height: auto;
  line-height: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.input_a{
  width: 100%;
}
.input_b{
  width: 35% !important;
}
.el-avatar {
  margin-right: 10px;
  border: 1px solid #eee;
}
.mr {
  margin-right: 10px;
}
.color-b {
  color: #409eff;
}
.color-r {
  color: #f56c6c;
}
.cursor-p {
  cursor: pointer;
}
.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.no-wrap {
  white-space: nowrap;
}
.w-60 {
  width: 40px;
}
.fs {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  opacity: 0;
  transform: all 2s;
}
.el-table /deep/ .el-table__row:hover {
  .fs {
    opacity: 1;
  }
}
</style>
